@extends('plugin.hostserver.front.layout.base')
@section('add_css')
    <link href="{{plugin_res('hostserver/css/search.css')}}" rel="stylesheet">
    <link rel="stylesheet" href="{{plugin_res('hostserver/css/datatable.css')}}" />

@endsection
@section('content')
    <style type="text/css">
        table{
            table-layout:fixed;
        }
        table .order{
            text-align: center;
            width:70px;
        }

        table td {
            text-align: center;
            vertical-align: middle !important;
        }

        td {
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            -moz-text-overflow: ellipsis;
        }
        .order-icon {
            margin-left: 8px;
            color: #6fae17 !important;
            font-size: 1.8rem;
            font-family: fantasy;
        }
    </style>
    <div id="features" style="margin-top: 80px">
        <div class="container">
            <div id="box">
                @foreach($items as $k=>$h)
                    <dl id="{{$h['item_value']}}" class="condition">
                        <dt>{{$h['item_key']}}：</dt>
                        <dd>全部</dd>
                    </dl>
                @endforeach
                <dl class="select" style="border-bottom-width: 0px;display: none">
                    <dt>已选条件：</dt>
                </dl>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!-- Custom Tabs -->
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_1" data-toggle="tab"  style="color: #000;">列表</a></li>
                            <li><a href="#tab_2" data-toggle="tab" style="color: #000;">面板</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_1">
                                <section class="content">
                                    <div class="row">
                                        <div class=" col-xs-12">
                                            <div class="box">
                                                <!-- /.box-header -->
                                                <div class="box-body">
                                                    <table id="table"  class="table  table-bordered table-hover">
                                                        <thead>
                                                        <tr>
                                                            <th class="order" style="width: 120px">名称 </th>
                                                            <th  style="width: 70px">CPU
                                                                <span>
                                                                    <a href="javascript:;" class="order-icon">↑&nbsp;&nbsp;↓</a>
                                                                </span>
                                                            </th>
                                                            <th style="width: 70px">带宽
                                                                <span>
                                                                    <a href="javascript:;" class="order-icon">↑&nbsp;&nbsp;↓</a>
                                                                </span>
                                                            </th>
                                                            <th  style="width: 70px">内存
                                                                <span>
                                                                    <a href="javascript:;" class="order-icon">↑&nbsp;&nbsp;↓</a>
                                                                </span>
                                                            </th>
                                                            <th style="width: 70px">硬盘
                                                                <span>
                                                                    <a href="javascript:;" class="order-icon">↑&nbsp;&nbsp;↓</a>
                                                                </span>
                                                            </th>
                                                            <th class="order">服务器特点</th>
                                                            <th class="order">服务器类型</th>
                                                            <th style="width: 70px">价格
                                                                <span>
                                                                    <a href="javascript:;" class="order-icon">↑&nbsp;&nbsp;↓</a>
                                                                </span>
                                                            </th>
                                                            <th class="order">详情</th>
                                                            <th class="order">购买</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody id="search-result-table">
                                                        </tbody>
                                                    </table>
                                                    <div id="null-data" style="display: none">
                                                        <div style="padding: 20px;font-size: 20px;" class="text-center">没有找到数据</div>
                                                        {{--                                                        @include('plugin.hostserver.front.layout.no_item')--}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.col -->
                                    </div>
                                    <!-- /.row -->
                                </section>
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="tab_2">
                                <div class="container">
                                    <!-- Section Title End -->
                                    <div class="row" id="search-result-panel">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.tab-content -->
                    </div>
                    <!-- nav-tabs-custom -->
                </div>
            </div>
        </div>
    </div>
@endsection
@section('foot_js')
    <script src="{{ plugin_res('hostserver/js/search.js')}}"></script>
    <script src="{{plugin_res('hostserver/js/datatable.js')}}"></script>
    <script>

        var dataTeble;
        $(function () {
            setTable()
            getList();
            getGoodList('load')
        })
        /**
         * 获取每一个筛选项的所有筛选值
         */
        function getList() {
            let url="{{url('search/item_list')}}";

            let item=[];
            $(".condition").each(function () {
                item.push($(this).attr('id'))
            })
            let data={'data':item,'_token':'{{csrf_token()}}'};
            $.post(url,data,function (result) {
                for (let i=0;i<result.length;i++){
                    if(item[i]==result[i].key){
                        let list="";
                        let resultValue=result[i].value;
                        for (let k=0;k<resultValue.length;k++){
                            list+="<dd>"+addUnit(item[i],resultValue[k])+"</dd>"
                        }
                        $("#"+item[i]).append(list)
                    }
                }
                resSetSelect()
            })
        }

        /**
         * 重设筛选器
         */
        function resSetSelect() {
            var dls = document.querySelectorAll('dl:not(.select)');
            for (var i = 0; i < dls.length; i++) {
                dls[i].mark=false;	//给每一行的dl标签添加一条属性，用于对应下面的dd标签。我们约定如果这个属性的值为true表示对应的标签没有创建。如果值为false表示对应的标签已经创建了
                select(i);
            };
            //定义dd标签的点击事件
            $("dd").click(function () {
                getGoodList('reload')
            })
        }

        /**
         * 获取产品数据并渲染
         */
        function getGoodList(type) {
            let text= getAllFormvalueByClassName("condition");
            let url="{{url('search/list')}}";
            let data={'data':text,'_token':'{{csrf_token()}}'};
            $("#search-result-panel").empty();
            $.post(url,data,function (result) {
            	var order = '';
            	var orderType = 'desc';
            	var moneySort = eval('(' + text + ')').money_sort;
				if(moneySort == '从低到高'){
					order = 'money';
					var orderType = 'asc';
				}else if(moneySort == '从高到低'){
					order = 'money';
					orderType = 'desc';
				}
                showSearchResultWithTable(dataTeble,result.data,type,order,orderType)
				// console.log(result.data);
                if(result.data.length>0){
                    for(let i=0;i<result.data.length;i++){
                        showSearchResultWithPanel(result.data[i]);
                    }
                }else{
                    $("#search-result-panel").html("<div style=\"padding: 20px;font-size: 20px;\" class=\"text-center\">没有找到数据</div>");
                }
            })
        }

        /**
         * 初始化表格
         */
        function setTable() {
            dataTeble=$('#table').DataTable( {
                "searching": false,
                "destroy":true,
                "lengthChange": false,
                "bProcessing": true,
                responsive: false,
                bAutoWidth: true,
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sUrl": "",
                    "sEmptyTable": "未查询到符合条件的数据",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                }
            } );
        }

    </script>

@endsection
